@extends('Admin.base')

@section('content')
<style type="text/css" media="screen">
    .lay-dd{ line-height:40px; }
    .layui-con{ padding-left:30px; }
    .lay-price{ width:150px; display: inline-block; }
</style>
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <fieldset class="layui-elem-field layui-field-title" >
                <legend>会员详情</legend>
            </fieldset>
            <div class="layui-form" style="margin-top:30px;">
                <div class="layui-form-item layui-row">
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div style="margin: auto 10px;">
                            <input type="text" name="keyword" id="keyword" placeholder="请输入会员姓名，ID，手机号码" autocomplete="off" class="layui-input" value="">
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <button class="layui-btn" lay-submit lay-filter="LAY-search" id="search-btn" style="float: left">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div id="account-info" class="layui-card-body">

        </div>
    </div>
@endsection

@section('script')
    <script src="/js/ajax.js"></script>
    <script>
        layui.use(['form','element'], function(){
            var $ = layui.$
                ,form = layui.form;

            var user = '';

            //监听搜索
            form.on('submit(LAY-search)', function(data){
                var field = data.field;
                getUserInfo(field);
            });


            $('#account-info').on('click','.money_recharge,.money_eight_consh_recharge,.money_consh_recharge',function(){
                var balance = 0;
                if($(this).data('type') == 'money_recharge')             balance = user.money_recharge;
                if($(this).data('type') == 'money_eight_consh') balance = user.money_eight_consh;
                if($(this).data('type') == 'money_consh')       balance = user.money_consh;
                layer.open({
                    type: 1,
                    title:'会员信息',
                    btnAlign: 'c',
                    area: ['420px'], //宽高
                    content: '<div class="layui-card">\n' +
                    '    <div class="layui-card-body">\n' +
                    '        <div class="layui-form" lay-filter="">\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <label class="layui-form-label">会员姓名</label>\n' +
                    '                <div class="layui-input-inline">\n' +
                    '                    <span class="layui-form-mid">'+((user.realname == null) ? '' : user.realname)+'</span>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <label class="layui-form-label">手机号码</label>\n' +
                    '                <div class="layui-input-inline">\n' +
                    '                    <span class="layui-form-mid">'+((user.phone == null) ? '' : user.phone)+'</span>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <label class="layui-form-label">当前余额</label>\n' +
                    '                <div class="layui-input-inline">\n' +
                    '                    <span class="layui-form-mid">'+balance+'</span>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <label class="layui-form-label">充值金额</label>\n' +
                    '                <div class="layui-input-inline">\n' +
                    '                    <input type="number" min="0.01" step="0.01" id="recharge_value" name="value" value="" autocomplete="off" class="layui-input">\n' +
                    '                    <input type="hidden" id="recharge_type" name="recharge_type" value="'+$(this).data('type')+'" autocomplete="off" class="layui-input">\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <label class="layui-form-label"></label>\n' +
                    '                    <a href="javascript:void(0);" class="layui-btn" id="recharge-btn">确认充值</a>\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '</div>'
                });
                return false;
            });

            $('body').on('click','#recharge-btn',function(){
                var recharge_value = parseFloat($('#recharge_value').val());
                var recharge_type = $('#recharge_type').val();
                if(!recharge_value || recharge_value <= 0){
                    layer.msg('请输入充值金额');
                    return false;
                }
                layer.closeAll('page');

                $.ajax({
                    url: '{{route('accountRecharge.recharge')}}/'+user.id
                    , type: 'POST'
                    , dataType: 'json'
                    , data: {recharge_value:recharge_value,recharge_type:recharge_type}
                    , beforeSend:function(){
                        layer.load(2);
                    }
                    , success: function (ret) {
                        if (ret.hasOwnProperty('code') && ret.code == 200) {
                            getUserInfo({userid:user.id});

                            layer.msg(ret.message,{icon: 1});
                            return false;
                        }
                        layer.msg(ret.message,{icon:2});
                    }
                    , complete: function(){
                        layer.closeAll('loading');
                    }
                });

                return false;

            });

            function getUserInfo(field){
                $.ajax({
                    url: '{{route('accountRecharge.info')}}'
                    , type: 'POST'
                    , dataType: 'json'
                    , data: field
                    , beforeSend:function(){
                        layer.load(2);
                    }
                    , success: function (ret) {
                        if (ret.hasOwnProperty('code') && ret.code == 200) {
                            user = ret.data;
                            var data  = ret.data,wechat = last_address = invite_realname = number = department = position = '';
                            if(data.user_type == 1) wechat = '微信号码: '+ data.wechat;
                            if(data.user_has_order && data.user_has_order.length > 0) last_address = data.user_has_order[0].get_region || data.user_has_order[0].user_address;
                            if(data.invite_user_info != null && data.invite_user_info.user_type == 1) {
                                invite_realname = data.invite_user_info.realname || '';
                                number = data.invite_user_info.number || '';
                                department = data.invite_user_info.user_department.department_name || '';
                                position = data.invite_user_info.user_position.position_name || '';
                                status = (data.invite_user_info.status == 1) ? '在职' : '离职';
                            }
                            var Html = '<div class="layui-con">\n' +
                                '                <div class="layui-row">\n' +
                                '                    <div class="layui-col-md12">\n' +
                                '                      <div class="layui-row">\n' +
                                '                        <div class="layui-col-md2">\n' +
                                '                          <div class="lay-dd">\n' +
                                '                            <img src=" ' + (data.avatar || '') + ' " width="80">\n' +
                                '                          </div>\n' +
                                '                        </div>\n' +
                                '                        <div class="layui-col-md5">\n' +
                                '                            <div class="lay-dd">微信昵称: ' + (data.nickname || '') + ' </div>\n' +
                                '                            <div class="lay-dd">真实姓名:  ' + (data.realname || '') + ' </div>\n' +
                                '                            <div class="lay-dd">会员ID:  ' + (data.number || '') + ' </div>\n' +
                                '                            <div class="lay-dd">注册时间:  ' + (data.created_at || '') + ' </div>\n' +
                                '                            <div class="lay-dd">出生日期: ' + (data.birthday || '') + ' </div>\n' +
                                '                        </div>\n' +
                                '                        <div class="layui-col-md5">\n' +
                                '                            <div class="lay-dd">性别: ' + (data.sex_name || '') + ' </div>\n' +
                                '                            <div class="lay-dd">手机号码:  ' + (data.phone || '') + ' </div>\n' +
                                '                            <div class="lay-dd">Open ID:  ' + (data.openid || '') + ' </div>\n' +
                                '                            <div class="lay-dd">最近登入小程序:  ' + (data.last_login || '') + ' </div>\n' +
                                '                            <div class="lay-dd"> ' + (wechat || '') + ' </div>\n' +
                                '                        </div>\n' +
                                '                      </div>\n' +
                                '                    </div>\n' +
                                '                </div>\n' +
                                '                <div class="layui-row" style="margin-top: 20px;">\n' +
                                '                    当前会员等级： ' + (data.calcLevel || '') + '    &nbsp;&nbsp;&nbsp; ' + (data.surplus_time || '') + ' \n' +
                                '                </div>\n' +
                                '                <div class="layui-row" style="margin-top: 20px;">\n' +
                                '                    所属城市： ' + (data.province_info.name || '') + '   ' + (data.city_info.name || '') + '      &nbsp;&nbsp;&nbsp;\n' +
                                '                    上次收货地址：' + (last_address || '') + '\n' +
                                '                </div>\n' +
                                '\n' +
                                '\n' +
                                '                <div class="layui-row" style="margin-top: 20px;">\n' +
                                '                    所属员工：\n' + (invite_realname || '') + ' &nbsp;&nbsp;&nbsp; ' + (number || '') + ' &nbsp;&nbsp;&nbsp; ' + (department || '') + ' &nbsp;&nbsp;&nbsp;\n' + (status || '') +
                                '                </div>\n' +
                                '\n' +
                                '\n' +
                                '                <div class="layui-row" style="margin-top: 60px;">\n' +
                                '                    <span class="lay-price">充值余额： ' + (data.money_recharge || 0) + ' </span>\n' +
                                '                    <button class="layui-btn layui-btn-xs money_recharge" data-type="money_recharge">充值</button>\n' +
                                '                </div>\n' +
                                '                <div class="layui-row" style="margin-top: 20px;">\n' +
                                '                    <span class="lay-price">八贝币余额： ' + (data.money_eight_consh || 0) + ' </span>\n' +
                                // '                    <button class="layui-btn layui-btn-xs money_eight_consh_recharge" data-type="money_eight_consh">充值</button>\n' +
                                '                </div>\n' +
                                '                <div class="layui-row" style="margin-top: 20px;">\n' +
                                '                    <span class="lay-price">贝壳余额： ' + (data.money_consh || 0) + ' </span>\n' +
                                // '                    <button class="layui-btn layui-btn-xs money_consh_recharge" data-type="money_consh">充值</button>\n' +
                                '                </div>\n' +
                                '                <div class="layui-row" style="margin-top: 20px;">\n' +
                                '                    <span class="lay-price">订单数： ' + (data.order_num || 0) + ' </span>\n' +
                                '                </div>\n' +
                                '                <div class="layui-row" style="margin-top: 20px;">\n' +
                                '                    已完成交易金额： ' + (data.total_real_pay || 0) + ' \n' +
                                '                </div>\n' +
                                '                <div class="layui-row" style="margin-top: 20px;">\n' +
                                '                    邀请好友数： ' + data.user_has_invite_count + ' \n' +
                                '                </div>\n' +
                                '            </div>';

                            $('#account-info').html(Html);
                            return false;
                        }
                        layer.msg(ret.message,{icon:2});
                    }
                    , complete: function(){
                        layer.closeAll('loading');
                    }
                });
            }
        });
    </script>
@endsection